<template>
  <van-list
    v-model:loading="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
    class="van-cont"
  >
    <div class="job-cont">
      <job-item v-for="item in jobList" :key="item.objectId" :job-data="item" />
    </div>
  </van-list>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { jobGet } from "../api/pro";
import { JobType } from "../types/pro";
const jobList = ref<Array<JobType>>([]);
const loading = ref(false); //当loading为false的时候，触底可以触发onLoad
const finished = ref(false); //当数据全部请求完毕后，关闭触底监听
let page = 1;
// onLoad是由van-list组件自动触发
const onLoad = () => {
  jobGet(page).then((res) => {
    let { results } = res.data;
    if (results.length) {
      jobList.value = [
        ...jobList.value, //原数据
        ...results, //新数据
      ];
      loading.value = false; //停止loading，保证下次可以继续触发onLoad
      page++;
    } else {
      finished.value = true; //所有数据加载完毕
    }
  });
  console.log("触底了");
};
</script>

<style lang="scss" scoped>
.van-cont {
  margin-bottom: 10rem;
}
.job-cont {
  padding: 4.8rem;

  .job-item {
    border: 1px solid rgba(238, 238, 238, 1);
    padding: 3.2rem;
    margin-bottom: 3.2rem;
  }
  .company {
    font-size: 2.4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2.4rem;
    img {
      width: 4rem;
      height: 4rem;
    }
    .name {
      display: flex;
      align-items: center;
    }
  }
  .intro {
    line-height: 4rem;
  }
  .margin-tb {
    margin: 2rem 0;
  }
  .fs-22 {
    font-size: 2.2rem;
  }
  .fs-24 {
    font-size: 2.4rem;
  }
  .fs-28 {
    font-size: 2.8rem;
  }
  .color-grey {
    color: rgba(102, 110, 122, 1);
  }
}
</style>
